<!--
 * @Author: ryo
 * @Date: 2021-11-20 22:57:30
 * @LastEditors: ryo
 * @LastEditTime: 2021-11-30 15:06:39
 * @Description: Home 组件
 * @FilePath: \site\src\views\home\Home.vue
-->
<template>
  <div class="home">
    <!-- 轮播图 -->
    <m-carousel></m-carousel>
    <!-- 公司介绍 -->
    <companyIntroduction :isMoreVisible="true"></companyIntroduction>
    <!-- banner  -->
    <v-row class="ma-0">
      <v-img src="/images/banner/02.jpg"></v-img>
    </v-row>
    <!-- 产品中心 -->
    <v-container fluid class="mb-15 mt-10 box">
      <v-row justify="center" align="center">
        <v-col md="6">
          <div class="box_title">
            <div class="h2">产品中心</div>
            <div class="caption">Product Center</div>
          </div>
        </v-col>
        <v-col md="6" class="text-end">
          <v-btn :depressed="true" color="red" dark rounded to="/product">
            查看全部
          </v-btn>
        </v-col>
      </v-row>
      <v-row justify="start" align="center">
        <v-col md="4" v-for="product in products" :key="product.id">
          <v-card class="mx-auto" max-width="370" flat outlined>
            <v-img :src="product.img" max-width="370"></v-img>
            <v-card-title class="justify-center body-1">
              {{ product.text }}
            </v-card-title>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
    <!-- banner  -->
    <v-row class="ma-0">
      <v-img src="/images/banner/03.jpg"></v-img>
    </v-row>
    <!-- 荣誉资质 -->
    <v-container fluid class="mb-15 mt-10 box">
      <v-row justify="center" align="center">
        <v-col cols="12" class="d-flex align-center justify-center">
          <div class="honor_left"></div>
          <div class="honor_title text-center text-sm-h4 text-h5 mx-4">
            公司的<span class="red--text">资质与荣誉</span>
          </div>
          <div class="honor_right"></div>
        </v-col>
        <v-col cols="12" class="subtitle-1 text-center grey-text">
          专业从事高铁基础设施智能监测系统软硬件开发、制造与服务。
        </v-col>
      </v-row>
      <v-row justify="start" align="center">
        <v-col md="3" sm="4" cols="12" v-for="honor in honors" :key="honor.id">
          <v-card class="mx-auto" max-width="247" flat outlined>
            <v-img
              :src="honor.img"
              max-width="247"
              :title="honor.text"
              :alt="honor.text"
            ></v-img>
          </v-card>
        </v-col>
      </v-row>
      <v-row align="center" justify="center" class="mt-10">
        <v-btn
          :depressed="true"
          rounded
          outlined
          to="/honor"
          class="grey--text text--darken-1 border_more"
          width="200"
          height="44"
        >
          查看更多
          <v-icon right>mdi-plus</v-icon>
        </v-btn>
      </v-row>
    </v-container>
  </div>
</template>

<script>
// 组件
import mCarousel from '@/components/common/Carousel.vue';
import companyIntroduction from '@/views/company/components/Introduction.vue';
// 常量
import constant from '@/const';

export default {
  name: 'Home',
  components: {
    mCarousel,
    companyIntroduction
  },
  data() {
    return {
      tabsModel: {
        list: constant.company.companyTabs
      },
      productModel: {
        list: constant.product.products
      }
    };
  },
  computed: {
    products() {
      const size = Math.min(this.productModel.list.length, 6);
      return this.productModel.list.slice(0, size);
    },
    honors() {
      const size = Math.min(constant.honor.list.length, 8);
      return constant.honor.list.slice(0, size);
    }
  }
};
</script>

<style lang="scss" scoped>
@mixin line {
  position: relative;
  width: 10%;
  height: 1px;
  box-shadow: 0 1px 0 0 gray;
}

@mixin border {
  content: '';
  position: absolute;
  top: -15px;
  width: 1px;
  height: 30px;
  box-shadow: 1px 0 0 0 gray;
  @content;
}

.home {
  .honor {
    &_left {
      @include line;
      &::before {
        @include border {
          right: 0;
        }
      }
    }
    &_right {
      @include line;
      &::before {
        @include border {
          left: 0;
        }
      }
    }
  }
}
</style>
